<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
textarea{
width: 800px;
margin: 10px auto;
display: block;
resize: none;
outline: none;
}
button{
width: 800px;
margin: 10px auto;
display: block;
background: rgb(1, 255, 255);
border: none;
outline: none;
line-height: 40px;
cursor: pointer;
}
ul{
width: 800px;
margin: 10px auto;
}
ul>li{
background-color: white;
margin-bottom: 10px;
position: relative;
padding: 4px;
}
span{
position: absolute;
right: 0px;
top: -5px;
cursor: pointer;
}
div{
    width: 300px;
    height: 50px;
    background: white;
    margin: 0 auto;
}
div p{
    size: 16px;
    font-family: 宋体;
    text-align:center;
    color: 
    
}
</style>
</head>
<body>
    <div><p>我的微博</p></div>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button id="btn">微博发布</button>
<ul id="box">
<li>
<img src="01.ico" alt="">
:昨晚打雷了！！
<p>2021/6//4</p>
<span onclick="del(this)">x</span>
</li>
</ul>
<script>
btn.onclick=function(){
if(txt.value==''){
alert('请输入内容')
}else{
var d=new Date();
console.log(d)
var year=d.getFullYear();
var month=d.getMonth()+1;
var date=d.getDate();
var val=txt.value;
var tag=document.createElement('li');
tag.innerHTML=`<img src="01.ico" alt="">:${val}
<p>${year}/${month}/${date}</p>
<span onclick="del(this)">x</span>`
box.appendChild(tag)
txt.value=''
}
}
function del(a){
a.parentNode.parentNode.removeChild(a.parentNode)
}
</script>
</body>
</html>